<template>
	<view class="loginLayout pageBg">
		<view class="info-wrap">
			<view class="avatar">
				<image src="../../static/images/logo.png" mode="aspectFill"></image>
			</view>
			<view class="text-wrap">
				<view class="title">致成壁纸</view>
				<view class="desc">好看到爆的免费壁纸</view>
			</view>
		</view>
		<view class="btn-wrap">
			<button class="weixin" @click="wechatLogin">
				<uni-icons type="weixin" size="30" color="#fff"></uni-icons>
				微信一键登录
			</button>
			<button @click="backLogin">
				<uni-icons type="undo" size="30"></uni-icons>
				暂不登录
			</button>
		</view>
		<view class="policy-wrap">
			<label>
				<checkbox :value="agreenPolicy" @click="agreenPolicy = !agreenPolicy" />
				<view>
					同意
					<text class="link" @click.stop="openService">用户服务协议</text>
					和
					<text class="link" @click.stop="openPolicy">隐私政策条款</text>
				</view>
			</label>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { wxLogin } from '@/api/index.js';
import TokenManager from '@/utils/tokenManager.js';

const agreenPolicy = ref(false);
const openService = () => {
	uni.navigateTo({
		url: '/pages/policy/serviceAgreement'
	});
};
const openPolicy = () => {
	uni.navigateTo({
		url: '/pages/policy/privacyPolicy'
	});
};

// 获取用户信息：头像、昵称等
const getUserInfo = () => {
	return new Promise((resolve, reject) => {
		uni.getUserInfo({
			success(res) {
				resolve(res.userInfo);
			},
			fail(error) {
				reject(error);
			}
		});
	});
};

// 获取微信登录凭证code，有效期五分钟
const getLoginCode = () => {
	return new Promise((resolve, reject) => {
		wx.login({
			success: async (res) => {
				resolve(res.code);
			},
			fail(error) {
				reject(error);
			}
		});
	});
};

// 微信一键登录
const wechatLogin = async () => {
	if (!agreenPolicy.value) {
		return uni.showToast({
			title: '请勾选用户协议！',
			icon: 'none',
			duration: 2000
		});
	}
	uni.showLoading({
		title: '登录中...'
	});
	const userInfo = await getUserInfo();
	const code = await getLoginCode();
	// 获取 tokenExpired、token 等信息
	if (code) {
		const res = await wxLogin({
			clientInfo: uni.getSystemInfoSync(),
			params: { code }
		});
		if (res.errCode === 0) {
			const uid = res.uid;
			uni.setStorageSync('userInfo', { ...userInfo, uid });
			const { tokenExpired, token } = res.newToken;
			TokenManager.setToken(token, tokenExpired);
			uni.hideLoading();
			// 跳转到用户页
			uni.reLaunch({
				url: '/pages/user/user'
			});
		}
	}
};

// 暂不登录
const backLogin = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.loginLayout {
	.info-wrap {
		display: flex;
		padding: 360rpx 10% 200rpx;
		.avatar image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 16rpx;
		}
		.text-wrap {
			margin-left: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			color: #e58873;
			letter-spacing: 6px;
			.title {
				font-size: 56rpx;
				font-weight: bold;
			}
			.desc {
				font-size: 24rpx;
			}
		}
	}
	.btn-wrap {
		margin: 0 10%;
		button {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 110rpx;
			&.weixin {
				background: #e58873;
				color: #fff;
			}
		}
	}
	.policy-wrap {
		font-size: 28rpx;
		color: #666;
		label {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.link {
			color: #e58873;
		}
	}
}
</style>
